<template>
  <el-row :gutter="15">
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="fhbOrderNo" style="position: relative">
                <el-input v-model="search.fhbOrderNo" type="textarea" :rows="4" placeholder="订单号"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="payCode" style="position: relative">
                <el-input v-model="search.payCode" type="textarea" :rows="4" placeholder="支付单号"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="founderName">
                <el-input v-model="search.founderName" placeholder="发起账号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="foundStartTime">
                <el-date-picker type="date"
                                placeholder="发起开始日期"
                                value-format="yyyy-MM-dd"
                                v-model="search.foundStartTime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="foundEndTime">
                <el-date-picker type="date"
                                placeholder="发起结束日期"
                                v-model="search.foundEndTime"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-order/payPackage/findPackageList"
        :initParams="{
          tabState: '1',
          status: 'P-200'
        }"
        :columns="columns"
        :tabs="tabs"
        :showButtonGroup="false"
        @selection-change="selectionChange"
      >
        <template slot="preColumn">
          <el-table-column prop="fhbOrderNo" fixed="left" width="170px" align="center" label="支付单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="approve(scope.row)">{{ scope.row.payCode }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="approve(scope.row)"
              >
                审批
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {filterDataBaseDictionary, unixTimestampFilter, filterSecond} from '@/filters'
import {copy} from '@/utils'
export default {
  name: 'paymentApproveApproveIndex',
  components: {
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter,
    filterSecond
  },
  data() {
    let columns = [
      {
        label: '订单号',
        data: 'orderNo'
      },
      {
        label: '费用数量',
        data: 'orderNum'
      },
      {
        label: '总金额',
        data: 'orderAllMoney'
      },
      {
        label: '发起账号',
        data: 'founderName'
      },
      {
        label: '发起时间',
        width: '134px',
        data: 'foundTime',
        render: (data, full) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm:ss')
        }
      }
    ]
    return {
      visible: false,
      visibleResult: false,
      subOrderFinish: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      isOpen: false,
      searchLoading: false,
      checkedData: [],
      search: {
        fhbOrderNo: '',
        payCode: '',
        founderName: '',
        foundStartTime: '',
        foundEndTime: ''
      },
      columns: columns,
      tabs: []
    }
  },
  created() {
  },
  methods: {
    selectionChange(arr) {
      this.checkedData = arr
    },
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let data = copy(this.search)
        this.searchLoading = true
        basicTable.search(data).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    show(data) {
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    approve(data) {
      this.$router.push({path: '/ss-fhb/paymentApprove/approve/show/' + data.id})
    }
  }
}
</script>
